<template>
  <div class="comment-textarea-wrap">
    <div class="avatar-wrap" v-if="showAvatar">
      <el-avatar
        class="pointer"
        @click.native="lookUserInfo"
        @error="errorHandler"
        :size="40"
        :src="userInfo?userInfo.avatarImg:require('../../../assets/image/avatar.png')">
        <img src="../../../assets/image/avatar.png"/>
      </el-avatar>
      <!--<img :src="userInfo.avatarImg" alt="" style="width: 50px;height: 50px">-->
      <p class="user-name">{{userInfo?userInfo.nickName:"雁过留名"}}</p>
    </div>
    <div class="textarea-wrap" id="textareaWrap">
      <el-input type="textarea" rows="3" resize="none" v-model="commentObj.content"
                :placeholder="placeholder"></el-input>
      <div class="textarea-publish">
        <div class="emoji-wrap hidden-xs-only" ref="emojiWrap">
          <span class="emoji-btn" @click="showEmoji=!showEmoji">😀</span>
          <v-emoji-picker
            v-if="showEmoji"
            class="emoji-picker"
            emojisByRow="15"
            :emojiSize="30"
            :showSearch="false"
            :pack="packData"
            @select="selectEmoji">
          </v-emoji-picker>
        </div>
        <el-button type="primary" size="small" @click="submitComment">提 交</el-button>
      </div>
    </div>

    <el-dialog :append-to-body="true" :visible.sync="isDialog" width="400px" center>
      <el-form :model="userForm" :rules="userRules" ref="userForm" size="medium">
        <el-form-item prop="nickName">
          <el-input :maxlength="10" v-model="userForm.nickName" placeholder="昵称"></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input v-model="userForm.email" placeholder="QQ邮箱(仅为了获取QQ头像)"></el-input>
        </el-form-item>
        <el-form-item prop="webUrl">
          <el-input v-model="userForm.webUrl" placeholder="博客/github地址(开头http://或https://)"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submitUserInfo">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import VEmojiPicker from 'v-emoji-picker';
  import {saveUserInfo, comment, sendEmail} from "../../../assets/api/getData";
  import {setLocalStore, getLocalStore} from "../../../assets/utils/tools";
  import {mapState, mapMutations} from "vuex";
  import {validateQQEmail} from "../../../assets/utils/validate";

  export default {
    name: "commentTextarea",
    components: {
      VEmojiPicker
    },
    props: {
      placeholder: {
        type: String,
        default: ""
      },
      blogId: {
        type: Number,
        default: null
      },
      targetId: {
        type: Number,
        default: null
      },
      byAiteId: {
        type: Number,
        default: null
      },
      byAiteName: {
        type: String,
        default: ""
      },
      byAiteIsAuthor: {
        type: Number,
        default: null
      },
      showAvatar: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {
        packData: [],
        showEmoji: false,
        commentObj: {
          blogId: this.blogId,
          targetId: this.targetId,
          byAiteId: this.byAiteId,
          byAiteName: this.byAiteName,
          byAiteIsAuthor: this.byAiteIsAuthor,
          content: "",
          userId: null,
          nickName: "",
          avatarImg: "",
          isAuthor: null,
        },
        isDialog: false,
        userForm: {
          nickName: "",
          email: "",
          webUrl: "",
          avatarImg: "",
        },
        userRules: {
          nickName: {required: true, message: "必填", trigger: "blur"},
          email: {required: true, validator: validateQQEmail, trigger: "blur"}
        },
        qqUrl: "https://q1.qlogo.cn/g?b=qq&nk=QQ号码&s=100",
      }
    },
    computed: {
      ...mapState(["userInfo"])
    },
    created() {
      let userInfo = getLocalStore("userInfo");
      if (userInfo) {
        this.setUserInfo(JSON.parse(userInfo));
      }
    },
    mounted() {
      this.$nextTick(() => {
        // document 绑定click事件
        document.addEventListener('click', this.hideEmojiPanel, false);
      })
    },
    methods: {
      ...mapMutations(["setUserInfo"]),
      errorHandler() {
        return true
      },
      // 点击除弹出层外的空白区域
      hideEmojiPanel(event) {
        const vEl = this.$refs.emojiWrap;
        if (vEl && !vEl.contains(event.target)) {
          this.showEmoji = false
        }
      },
      selectEmoji(emoji) {
        // console.log(emoji);
        this.commentObj.content += emoji.data;
      },
      async submitComment() {
        if (!this.userInfo) {
          this.isDialog = true;
          return;
        }
        if (!this.commentObj.content) {
          return this.$message.warning("请输入内容");
        }
        this.commentObj.userId = this.userInfo.id;
        this.commentObj.nickName = this.userInfo.nickName;
        this.commentObj.avatarImg = this.userInfo.avatarImg;
        this.commentObj.isAuthor = this.userInfo.isAuthor;
        let res = await comment(this.commentObj);
        if (this.commentObj.byAiteId && this.userInfo.id == 3) {
          let res1 = await sendEmail({
            byAiteId: this.commentObj.byAiteId,
            subject: this.commentObj.byAiteName,
            content: this.commentObj.content,
          });
          console.log(res1)
        }
        this.$message.success(res.message);
        this.$emit("updateComments");
        this.commentObj.content = "";
      },
      lookUserInfo() {
        if (this.userInfo) {
          return;
        }
        this.isDialog = true;
      },
      submitUserInfo() {
        this.userForm.avatarImg = this.qqUrl.replace("QQ号码", this.userForm.email.replace("@qq.com", ""));
        this.$refs["userForm"].validate(async valid => {
          if (valid) {
            let res = await saveUserInfo(this.userForm);
            this.setUserInfo(res.data);
            setLocalStore("userInfo", res.data);
            this.isDialog = false;
            // this.$emit("updateComments");
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .comment-textarea-wrap {
    display: flex;
    justify-content: space-between;

    .avatar-wrap {
      margin-right: 20px;
      padding-top: 10px;
      text-align: center;

      .user-name {
        margin-top: 10px;
      }
    }

    .textarea-wrap {
      flex: 1;

      .textarea-publish {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;

        .emoji-wrap {
          position: relative;

          .emoji-btn {
            cursor: pointer;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            font-size: 25px;
          }

          .emoji-picker {
            position: absolute;
            top: 40px;
            margin-bottom: 20px;
          }
        }
      }
    }
  }

  @media screen and (max-width: 767px) {
    .textarea-publish {
      display: block !important;
      text-align: right;
    }
  }
</style>
<style lang="less">
  #textareaWrap {
    .emoji-wrap {
      .emoji-picker {
        display: flex;
        width: 650px;

        .container-emoji {
          height: 150px;
        }
      }
    }
  }
</style>
